<!--
 * @Description: 
 * @Date: 2022-07-12 08:37:01
 * @LastEditTime: 2022-11-18 15:21:04
 * @FilePath: \vue3\src\components\TitleTitle.vue
-->
<template>
  <div class="title-body">
    <div class="title-left">
      <span class="title-text" v-if="title"></span>
      <span class="title-desc" @click="titleDescClick" v-if="title">{{
        title
      }}</span>
    </div>
    <div class="title-buttons">
      <div v-for="(item, index) in btnList" :key="index">
        <el-button
          @click="titleClick(item)"
          v-if="item.hasPermission || false"
          :type="item.type || 'primary'"
          >{{ item.name }}</el-button
        >
      </div>
    </div>
  </div>
</template>
<script setup>
const props1 = defineProps({
  title: "",
  btnList: [],
});
const emit1 = defineEmits();
let titleClick = (item) => {
  emit1("btnClick", item.tag || item.name);
  console.log("title:" + props1.title);
};
</script>
<style lang="scss" scoped>
.title-body {
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .title-left {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .title-text {
      color: #646566;
      width: 5px;
      height: 16px;
      background: #1893f3;
      display: inline-block;
      margin-top: 5px;
    }
    .title-desc {
      text-align: center;
      margin-left: 5px;
    }
  }
  .title-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 10px;
  }
}
</style>
